<template>
    <el-dialog :title="props['data'].dialogTitle || ''" v-model="props['data'].orderDialog" :before-close="closeHandle">
        <!-- 导入名单 -->
        <div v-if="props['data'].handleOrderType == 'import'">
            <span style="font-size: 13px;font-weight: bold;">请选择该订单对应商家</span>
            <el-form style="margin-top: 10px;" ref="formSale" :model="props['data'].request.import"
                :rules="props['data'].formRules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="商家名称" :required="true">
                    <div style="position: relative;" class="autocomplete-input">
                        <el-autocomplete class="item-width-800px" :suffix-icon="'ArrowDown'"
                            v-model="data.autocompleteInput" :value-key="'sale'" @select="selectHandle"
                            :fetch-suggestions="querySearch" clearable placeholder="请选择商家名称" />
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- 确定打款 -->
        <div v-if="props['data'].handleOrderType == 'examine'">
            <div style="font-size: 13px;font-weight: bold;"> <span style="margin:0 5px 0 52px;">订单编号:
                </span>{{ props.data.row.num || '' }}
                <span style="margin-left: 30px;">商家名称:</span>{{ props.data.row.sale || '' }}
            </div>
            <el-form style="margin-top: 10px;" ref="formSale" :model="props['data'].request.examine"
                :rules="props['data'].formRules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="付款金额" prop="payPrice">
                    <el-input
                        @input="props['data'].request.examine.payPrice = numberTwoPoint(props['data'].request.examine.payPrice)"
                        class="item-width-800px" :disabled="true" v-model="props['data'].request.examine.payPrice"
                        placeholder="请输入付款金额"></el-input>
                </el-form-item>
                <el-form-item label="打款时间" prop="payTime">
                    <el-date-picker style="width: 800px;" class=" order-picker-input" value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="props['data'].request.examine.payTime" type="datetime" placeholder="请选择打款时间"
                        :size="'default'" :disabled-date="disabledDate"   :disabled-hours="disabledHour"
                        :disabled-minutes="disabledMinute"/>
                </el-form-item>
                <el-form-item label="打款说明" prop="payDescription">
                    <el-input class="item-width-800px" v-model="props['data'].request.examine.payDescription"
                        placeholder="请输入打款说明"></el-input>
                </el-form-item>
                <el-form-item label="打款凭证" prop="payReceiptUrl">
                  <imageUpload ref="payImageUploadRef" :limit="1" :fileSize="2" :modelValue="props['data'].request.examine.payReceiptUrl"/>
                </el-form-item>
            </el-form>
        </div>
        <!-- 申请开票 -->
        <div v-if="props['data'].handleOrderType == 'invoicing'">
            <el-form style="margin-top: 10px;" ref="formSale" :model="props['data'].request.invoicing"
                :rules="props['data'].formRules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="开票类型" prop="titleTypeCode">
                    <el-radio-group v-model="props.data.request.invoicing.titleTypeCode" class="" style="margin-top: -4px;">
                        <el-radio label="enterprise" size="large">企业发票</el-radio>
                        <el-radio label="person" size="large">个人发票</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="发票抬头" prop="title">
                    <el-input class="item-width-800px" maxlength="20" v-model="props['data'].request.invoicing.title"
                        placeholder="请输入发票抬头"></el-input>
                </el-form-item>
                <div v-if="props.data.request.invoicing.titleTypeCode == 'enterprise'">
                    <el-form-item label="税号" prop="taxIdentificationNumber">
                        <el-input class="item-width-800px" maxlength="30"
                            v-model="props['data'].request.invoicing.taxIdentificationNumber"
                            placeholder="请输入纳税人识别号"></el-input>
                    </el-form-item>
                    <el-form-item label="企业地址" prop="name">
                        <el-input class="item-width-800px" maxlength="20" v-model="props['data'].request.invoicing.address"
                            placeholder="请输入企业地址"></el-input>
                    </el-form-item>
                    <el-form-item label="企业电话" prop="name">
                        <el-input
                            @input="props['data'].request.invoicing.mobile = checkMobile(props['data'].request.invoicing.mobile)"
                            class="item-width-800px" maxlength="11" v-model="props['data'].request.invoicing.mobile"
                            placeholder="请输入企业电话"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" prop="name">
                        <el-input class="item-width-800px" maxlength="20" v-model="props['data'].request.invoicing.bankName"
                            placeholder="请输入开户银行"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" prop="name">
                        <el-input
                            @input="props['data'].request.invoicing.bankAccount = onlyNumber(props['data'].request.invoicing.bankAccount)"
                            class="item-width-800px" maxlength="20" v-model="props['data'].request.invoicing.bankAccount"
                            placeholder="请输入银行账号"></el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!-- refundsProcess 处理退款 -->
        <div v-if="props['data'].handleOrderType == 'refundsProcess'" style="font-size: 13px;color: #333333;">
            <div style="margin-bottom: 10px;font-weight: bold;">订单编号：<span style="margin-left: 5px;">{{
                props.data.row.num || '' }}</span>
            </div>
            <el-table class="refunds-process-table" :header-row-style="{ height: '44px' }" :row-style="{ height: '44px' }"
                :data="props['data'].request.refundsProcess.refundList" :border="true">
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="idCard" label="身份证号" />
                <el-table-column prop="courseName" label="科目" />
                <el-table-column prop="price" label="退款金额(元)" />
            </el-table>
            <div style="font-weight: bold;margin-top: 10px;">共<span style="color:#F56C6C">{{ props['data'].request.refundsProcess.refundList.length||0 }}</span>
              名学员退款，退款总金额：<span style="color:#F56C6C">{{ refundPriceTotal }}元</span>
            </div>
            <div style="margin-top: 10px;">退款原因：<span style="margin-left: 5px;">{{props['data'].row.refundDescription || ''}}</span></div>
            <div style="margin-top: 30px;">
                <span style="margin-right: 12px;">退款说明</span>
                <el-input style="width:816px;" v-model="props['data'].request.refundsProcess.auditDescription"
                    placeholder="请输入退款说明"></el-input>
            </div>
        </div>
        <!--上传退款单  refundRequest-->
        <div v-if="props['data'].handleOrderType == 'refundRequest'">
            <el-form ref="formSale" :model="props['data'].request.refundRequest" :rules="props['data'].formRules"
                label-width="120px" class="demo-ruleForm">
                <el-form-item label="退款日期" prop="payoutDate">
                    <el-date-picker value-format="YYYY-MM-DD" style="width: 800px;" class=" order-picker-input"
                        v-model="props['data'].request.refundRequest.payoutDate" type="date" placeholder="请选择退款日期"
                        :size="'default'" :disabled-date="disabledDate"   :disabled-hours="disabledHour" :disabled-minutes="disabledMinute"/>
                </el-form-item>
              <el-form-item label="退款金额" prop="finalPrice">
                <el-input class="item-width-800px" v-model="props['data'].request.refundRequest.finalPrice"
                          @input="props['data'].request.refundRequest.finalPrice = onlyNumber(props['data'].request.refundRequest.finalPrice)"
                          placeholder="请输入退款金额"></el-input>
              </el-form-item>
                <el-form-item label="打款单" prop="payoutReceiptUrl">
                  <imageUpload ref="refundImageUploadRef" :limit="1" :fileSize="2"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer " v-if="props['data'].handleOrderType == 'refundsProcess'">
                <el-button type="primary" @click="agreeRefundHandle">
                    同意退款</el-button>
            </span>
            <span class="dialog-footer " v-else>
                <el-button @click="closeHandle">
                    取消</el-button>
                <el-button type="primary" @click="confirmHandle">
                    确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {computed, nextTick, onMounted, reactive, ref} from 'vue';
import { saleListApi } from './const.js'
import { checkMobile, onlyNumber, numberTwoPoint } from '@/utils/checkInput'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getToken } from "@/utils/auth";
import { orderDetailApi } from './const.js'
import imageUpload from '@/components/ImageUpload'
import {disabledDate, disabledHour, disabledMinute} from '@/utils'
import {refundAgreeApi, operationItem, tableItem} from '../const'
const payImageUploadRef = ref(null)
const refundImageUploadRef = ref(null)
const props = defineProps({
    data: { default: function () { return {} } },
})

const refundPriceTotal = computed( () => {
  let price = 0
  props['data'].request.refundsProcess.refundList.map(item => {
    price = price + item.price
  })
  return price
})
const formSale = ref('')
const data = reactive({
    uploadFileUrl: import.meta.env.VITE_APP_BASE_API + "/common/upload",
    headers: { Authorization: "Bearer " + getToken() },
    autocompleteInput: '',
    childrenInfo: {},
    refundsProcessTable: [],
    refundPriceTotal: '',
    request: {
        "orderId": '',
        "name": "",
        "idCard": "",
        "refundStatus": "refunding"
    }
})

const closeHandle = () => {
    if (props['data'].handleOrderType == 'examine') {
        payImageUploadRef.value.cleanFileList()
    }
    if(props['data'].handleOrderType == 'refundsProcess' && refundImageUploadRef.value) {
        refundImageUploadRef.value.cleanFileList()
    }
  formClear()
  emit('closeHandle')
}
const formClear = () => {
    fileList.value = []
    switch (props['data'].handleOrderType) {
        case 'import':
          data.autocompleteInput = ''; break;
        case 'examine':
            for (const key in props.data.request.examine) {
                if (key != 'id') {
                    props.data.request.examine[key] = ''
                }
            };
            break;
        case 'refundRequest':
            for (const key in props.data.request.refundRequest) {
                if (key != 'id') {
                    props.data.request.refundRequest[key] = ''
                }
            };
            break;
        case 'refundsProcess':
            props.data.request.refundsProcess['auditDescription'] = '';
            break;
    }
    if (formSale.value) { formSale.value.resetFields() }
    props['data'].orderDialog = false
}
const fileList = ref([])
const emit = defineEmits(['confirmHandle','closeHandle'])
const agreeRefundHandle = () => {
  refundAgreeApi(props['data'].request.refundsProcess).then((res) => {
    if(res.code === 200) {
      ElMessage.success(res.msg)
      props['data'].handleOrderType = 'refundRequest'
      props['data'].dialogTitle = '上传打款单'
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const confirmHandle = () => {
    if (props.data.handleOrderType == 'import' && data.autocompleteInput == '') {
        ElMessage.warning('请输入选择商家名称');
        return
    }
    if(props.data.handleOrderType == 'examine') {
        let file = payImageUploadRef.value.fileList[0];
        if (file && file.raw) {
            props.data.request.examine.payReceiptUrl = file.raw.url
        }
    }
    if(props.data.handleOrderType == 'refundRequest'){
        let file = refundImageUploadRef.value.fileList[0];
        if (file && file.raw) {
            props.data.request.refundRequest.payoutReceiptUrl = file.raw.url
        }
    }
    if (formSale.value) {
        formSale.value.validate((valid, fields) => {
            if (!valid) { return }
            emit('confirmHandle', data.childrenInfo)
          nextTick(()=> {
            closeHandle()
          })
        })
    } else { emit('confirmHandle', data.childrenInfo) }
}
const handleSuccess = (res) => {
    switch (props['data'].handleOrderType) {
        case 'examine': props.data.request.examine.payReceiptUrl = res.url || ''; break;
        case 'refundRequest': props.data.request.refundRequest.payoutReceiptUrl = res.url || ''; break;
    }
}
const handleError = (file) => {

}
const handlePictureCardPreview = () => { }
const handleRemove = () => { }
const querySearch = (queryString, cb) => {
    saleListApi({
        "sale": data.autocompleteInput || '', //姓名
        "typeCode": "sale", //销售标识： “root”-销售 “sale”-商家}).then((res)=>{
    }).then((res) => {
        cb(res.rows)
    })
}
const selectHandle = (val) => {
    switch (props['data'].handleOrderType) {
        case 'import': props['data'].request.import.id = val.id; break;
    }
}
// const handlePictureCardPreview=()=>{}
</script>
<style lang="scss">
.autocomplete-input {
    .el-input {
        width: 800px;
    }
}

.refunds-process-table {
    th {
        height: 44px;
    }
}
</style>
<style lang="scss" scoped>
.input-select {
    position: absolute;
    top: 0;
    right: 5px;
    margin-top: 3px;
}

.item-width-800px {
    width: 800px;
}
</style>
